{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            PPPoE 节点查询
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'backend:statistic' %}"><i class="fa fa-dashboard"></i>统计</a></li>
            <li class="active">PPPoE 节点查询</li>
        </ol>
    </section>

    <section class="content">
        <div id="devlist">
            <div class="box box-primary" id="liebiao">
                <div class="box-header" style="margin-bottom: 30px;">
                    <div class="btn-group pull-left">
                        <button type="button" id="btnRefresh" class="btn btn-default">
                            <i class="glyphicon glyphicon-repeat"></i>刷新
                        </button>
                    </div>

                    <div class="layui-inline" style="margin-left: 160px;">
                        <div class="layui-input-inline">
                            <input type="file" lay-verify="email" id="files" autocomplete="off" class="layui-input">
                        </div>
                        <button class="btn btn-primary btn-sm" onclick="Upload(this)">导入CSV</button>
                    </div>

                    <div class="layui-inline" style="margin-left: 160px">
                        <div class="layui-input-inline">
                            在线： <span class="online"></span>
                            不在线：<span class="offline"></span>
                        </div>
                        <button class="layui-btn layui-btn-sm" onclick="BatchSearch(this)" id="batch_search">查询全部
                        </button>
                        <button class="layui-btn layui-btn-sm" onclick="BatchExport(this)" id="batch_export">批量导出
                        </button>
                    </div>

                </div>

                <div class="box-body">
                    <form>
                        <div class="form-group row" style="margin-bottom: 28px; margin-left: 2px">
                            <div class="col-sm-2">
                                <select class="form-control" id="province" name="pro">
                                    <option value="0">请选择省份</option>
                                    {% for province in province_list %}
                                        <option id="{{ forloop.counter }}">{{ province }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-sm-2" style="margin-right: 28px">
                                <select class="form-control" id="status" name="status">
                                    <option value="0">请选择状态</option>
                                    <option value="1">在线</option>
                                    <option value="2">离线</option>
                                </select>
                            </div>

                            <button class="btn btn-primary btn-sm" type="button" id="Search">搜索</button>
                            <button class="btn btn-primary btn-sm" style="margin-left: 10px" onclick="Export(this)"
                                    type="button">导出
                            </button>
                        </div>
                    </form>

                    <table id="dtbList" class="display" cellspacing="0" width="100%">
                        <thead>
                        <tr valign="middle">
                            <th>账户名称</th>
                            <th>Peer</th>
                            <th>状态</th>
                            <th>Endpoint</th>
                            <th>城市</th>
                            <th>IP</th>
                            <th>运营商</th>
                            <th>命名空间</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <br> <br>
                </div>
            </div>
        </div>
    </section>

{% endblock %}


{% block js %}
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.const.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script src="{% static 'plugins/js.cookie.js' %}"></script>
    <script type="text/javascript">

        //提示信息
        var lang = {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页 _MENU_ 项",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
            "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页",
                "sJump": "跳转"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        };

        //初始化表格
        var table = $("#dtbList").dataTable({
            language: lang,  //提示信息
            autoWidth: false,  //禁用自动调整列宽
            stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合
            processing: true,  //隐藏加载提示,自行处理
            serverSide: true,  //启用服务器端分页
            searching: false,  //禁用原生搜索
            orderMulti: false,  //启用多列排序
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui
            pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers
            columnDefs: [{
                "targets": 'nosort',  //列的样式名
                "orderable": false    //包含上样式名‘nosort’的禁止排序
            }],
            ajax: function (data, callback, settings) {
                //封装请求参数
                var province = $('#province').val().trim();
                var status = $('#status').val().trim();

                var pagesize = data.length; // 显示的记录条数
                var start = data.start; // 开始的记录序号
                var page = start / pagesize + 1; // 当前页码
                var draw = data.draw;

                var url = ["{% url 'backend:peer-list' %}" + '?province=' + province + '&status=' + status + '&pagesize=' + pagesize + '&page=' + page + '&draw=' + draw];

                $.ajax({
                    type: "GET",
                    url: url,
                    cache: false,  //禁用缓存
                    dataType: "json",
                    success: function (result) {
                        var returnData = {};
                        returnData.draw = data.draw;
                        returnData.recordsTotal = result.recordsTotal;
                        returnData.recordsFiltered = result.recordsFiltered;
                        returnData.data = result.data;//返回的数据列表

                        callback(returnData);
                    }
                });
            },
            //列表表头字段
            columns: [
                {'data': 'ppp_usr'},
                {'data': 'peer'},
                {'data': 'status'},
                {'data': 'end_point'},
                {'data': 'city'},
                {'data': 'pub_ip'},
                {'data': 'operator'},
                {'data': 'netns'},
            ]
        }).api();

        // 根据 Mac 地址过滤
        $('#Search').click(function () {
            var province = $('#province').val().trim();
            var status = $('#status').val().trim();

            if (province === "0" || status === "0") {
                layer.alert('请选择过滤条件！', {icon: 7});
                return false;
            }

            table.ajax.reload();
        });

        // 刷新
        $('#btnRefresh').click(function () {
            $('#province').val("0");
            $('#status').val("0");

            table.ajax.reload();
        });

        // 导入
        function Upload(that) {
            if ($('#files').val().length === 0) {
                layer.alert('请选择文件！', {icon: 7});
                return false;
            }

            var file_obj = new FormData();
            var file = document.getElementById("files").files[0];
            file_obj.append("files", file);

            if (!file.name.endsWith('.csv')) {
                layer.alert('请选择csv文件！', {icon: 7});
                return false;
            }

            var index = layer.load();
            let csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: "{% url 'backend:peer-upload' %}",
                type: "post",
                data: file_obj,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                processData: false,
                contentType: false,
                success: function (resp) {
                    layer.close(index);
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {'icon': 1});
                        table.ajax.reload();
                    } else {
                        layer.alert(resp.msg, {'icon': 5});
                    }
                }
            })
        }

        // 批量导出
        function BatchExport(that) {
            window.location.href = "{% url 'backend:peer-batch-export' %}";
        }

        // 导出
        function Export(that) {
            var province = $('#province').val().trim();
            var status = $('#status').val().trim();

            if (province === "0" || status === "0") {
                layer.alert('请选择过滤条件！', {icon: 7});
                return false;
            }

            window.location.href = ["{% url 'backend:peer-batch-export' %}" + '?province=' + province + '&status=' + status];
        }

    </script>
{% endblock %}
